<template>
  <div>
    <Modal v-model="visible" title="修改" width="350px" @on-cancel="handleCancel">
      <Form ref="dataForm" :model="dataForm">
        <FormItem prop="description" label="描述">
          <Input type="text" v-model="dataForm.description" placeholder="请输入" clearable style="width: 200px" />
        </FormItem>
        <FormItem prop="remark" label="备注">
          <Input type="textArea" v-model="dataForm.remark" placeholder="请输入" clearable style="width: 200px" />
        </FormItem>
        <FormItem prop="type" label="分类">
          <Select v-model="dataForm.type" style="width: 200px">
            <Option v-for="item in typeEnum" :value="item.value" :key="item.value">{{ item.text }}</Option>
          </Select>
        </FormItem>
        <FormItem prop="status" label="状态" v-role="['admin']">
          <Select v-model="dataForm.status" style="width: 200px">
            <Option v-for="item in statusEnum" :value="item.value" :key="item.value">{{ item.text }}</Option>
          </Select>
        </FormItem>
        <FormItem prop="sortable" label="排序">
          <InputNumber v-model="dataForm.sortable" placeholder="请输入" clearable style="width: 200px" />
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" @click="handleCancel">取消</Button>
        <Button type="primary" @click="handleSubmit" :loading="submitting">提交</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import { getByFileId, updateFile } from '@/api/file'
import { statusEnum, typeEnum } from '@/enum/index'

export default {
  props: {
    visible: {
      type: Boolean,
      require: true,
    },
    id: {
      type: [String, Number],
    },
  },
  data() {
    return {
      dataForm: {
        description: '',
        remark: '',
        type: '',
        status: null,
        sortable: 100,
      },
      submitting: false,
      statusEnum: statusEnum,
      typeEnum: typeEnum,
    }
  },
  watch: {
    visible(newValue) {
      if (newValue) {
        this.getDataForm()
      }
    },
  },
  methods: {
    async getDataForm() {
      const res = await getByFileId({ id: this.id })
      this.dataForm = res.data
    },
    async handleSubmit() {
      // console.log(this.dataForm)
      this.submitting = true
      const res = await updateFile(this.dataForm)
      if (res.code === 0) {
        this.$Message.success('操作成功')
      } else {
        this.$Message.error('操作失败：' + res.message)
      }
      this.submitting = false
      this.handleCancel()
    },
    handleCancel() {
      this.$emit('close')
    },
  },
  mounted() {},
}
</script>

<style scoped></style>
